{% extends 'admin/base.html' %}
{% load custom_filters staticfiles %}
{% block content %}
    <style>
        .cell {
            text-align: center;
        }

        #edit_form > div {
            top: 30%;
            left: 30%;
        }
    </style>
    <div id="app">
        <el-row>
            <el-popover placement="right" width="500" trigger="click">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="分类名称">
                        <el-input v-model="form.column_name" style="max-width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属分类">
                        <el-cascader v-model="form.column_parent" :options="options" :props="{ expandTrigger: 'hover' }" placeholder="请选择分类"></el-cascader>
                    </el-form-item>
                    <el-form-item label="分类排序">
                        <el-input v-model="form.column_order" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="站外链接">
                        <el-input v-model="form.column_link" placeholder="http://"></el-input>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input type="textarea" autosize placeholder="请输入关键词" v-model="form.column_keyword"></el-input>
                    </el-form-item>
                    <el-form-item label="分类描述">
                        <el-input type="textarea" v-model="form.column_description" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click.prevent="onAddSubmit" type="success" class="el-button--primary">保存添加</el-button>
                        <el-button @click="cancelClick">取消</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="primary" icon="el-icon-plus" slot="reference" @click="onGetCategory">增加</el-button>
            </el-popover>
            <el-button plain icon="el-icon-refresh-right"></el-button>
        </el-row>
        <br>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column property="uuid" label="分类编号" width="350"></el-table-column>
            <el-table-column property="column_name" label="分类名称" width="160"></el-table-column>
            <el-table-column property="column_parent" label="上级分类" width="160"></el-table-column>
            <el-table-column property="bookNum" label="小说本数" width="80"></el-table-column>
            <el-table-column property="update_time" label="修改时间" width="180"></el-table-column>
            <el-table-column label="首页显示" width="180">
                <template slot-scope="scope_">
                    <el-switch v-model="scope_.row.column_index_show" active-text="显示" inactive-text="隐藏" @change="index_show(scope_.$index,scope_.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="导航显示" width="180">
                <template slot-scope="_scope">
                    <el-switch v-model="_scope.row.column_display" active-text="显示" inactive-text="隐藏" @change="column_display(_scope.$index,_scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column property="other" label="其他操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--修改-->
        <template>
            <el-popover title="编辑" trigger="click" v-model="EditVisible" width="500" id="edit_form">
                <el-form ref="form" :model="editForm" label-width="80px">
                    <el-form-item label="分类名称">
                        <el-input v-model="editForm.column_name"></el-input>
                    </el-form-item>
                    <el-form-item label="所属分类">
                        <el-cascader v-model="editForm.column_parent" :options="options" :props="{ expandTrigger: 'hover' }" placeholder="请选择分类"></el-cascader>
                    </el-form-item>
                    <el-form-item label="分类排序">
                        <el-input v-model="editForm.column_order" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="站外链接">
                        <el-input v-model="editForm.column_link" placeholder="http://"></el-input>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input type="textarea" autosize placeholder="请输入关键词" v-model="editForm.column_keyword"></el-input>
                    </el-form-item>
                    <el-form-item label="分类描述">
                        <el-input type="textarea" v-model="editForm.column_description" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click.prevent="onEditSubmit" type="success" class="el-button--primary">保存</el-button>
                        <el-button @click="EditVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-popover>
        </template>
    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script>
        var Main = {
            data() {
                return {
                    editForm: {column_name: '', column_parent: '', column_order: 0, column_link: '', column_keyword: '', column_description: ''},
                    EditVisible: false,
                    options: [],
                    tableData: [
                        {% for nav in NavList %}
                            {
                                uuid: "{{ nav.uuid }}",
                                column_name: "{{ nav.column_name }}",
                                column_parent: "{{ nav.column_parent|column_parent }}",
                                bookNum: {{ nav.novel_categories.count }},
                                update_time: "{{ nav.update_time }}",
                                column_index_show: "{{ nav.column_index_show }}",
                                column_display: "{{ nav.column_display }}"
                            },
                        {% endfor %}
                    ],
                    form: {column_name: '', column_parent: '', column_order: 0, column_link: '', column_keyword: '', column_description: ''}
                }
            }
            , methods: {
                column_display(index, row) {
                    submit_ajax(this, 'GET', {'uuid': row.uuid, 'column_display': row.column_display}, '{% url 'admin_system:navigationEdit_display' %}', false);
                },
                index_show(index, row) {
                    submit_ajax(this, 'POST', {'uuid': row.uuid, 'column_index_show': row.column_index_show}, '{% url 'admin_system:navigationEdit_display' %}', false);
                },
                handleEdit: function (index, row) {
                    this.onGetCategory();
                    this.EditVisible = true;
                    var response = submit_ajax(this, 'GET', {'uuid': row.uuid}, "{% url 'admin_system:navigationEdit' %}", false, false);
                    if (response.code === 0) {
                        this.editForm = response.data
                    }
                },
                handleDelete: function (index, row) {
                    Delete(this, index, row)
                },
                onAddSubmit() {
                    if (this.form.column_parent !== undefined) {
                        this.form.column_parent = this.form.column_parent.pop();
                    }
                    var response = submit_ajax(this, 'POST', this.form, "{% url 'admin_system:navigationAdd' %}", true, true);
                    if (response.code === 0) {
                        $('#content').click();// 隐藏
                    }
                }, onEditSubmit() {
                    if (this.editForm.column_parent !== undefined && Array.isArray(this.editForm.column_parent)) {
                        this.editForm.column_parent = this.editForm.column_parent.pop();
                    }
                    var response = submit_ajax(this, 'POST', this.editForm, "{% url 'admin_system:navigationEdit' %}", true, true);
                    if (response.code === 0) {
                    }
                },
                onGetCategory() {
                    this.form = {column_order: 0};
                    this.options = [];
                    var response = submit_ajax(this, 'GET', {}, "{% url 'admin_system:navigationAdd' %}", false, false);
                    this.options = response.category;
                    this.options.splice(0, 0, {'label': '顶级分类', 'value': '0'});
                }, cancelClick(scope) {
                    $('#content').click();// 隐藏
                }

            }, mounted() {
                var all = Array();
                for (j = 0, len = this.tableData.length; j < len; j++) {
                    x = this.tableData[j];
                    x['column_index_show'] = x['column_index_show'] === 'True' ? true : false;
                    x['column_display'] = x['column_display'] === 'True' ? true : false;
                    all.push(x)
                }
                this.tableData = all;
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
        $(function () {
            $('button[class="el-button el-button--primary"]').on('click', function () {
                url = $(this).attr('url');
                window.location.href = url
            })
        })
    </script>
{% endblock %}